TreeView Elements

The C1TreeView class is a StackPanel with two elements:

A header that represents the actual node, with a button to collapse and expand the children.
A body that is another StackPanel and contains other nodes.

C1TreeViewItems can be added to the C1TreeView control as static items defined either in the XAML or in the code behind or can be defined on your page or user control by using any of the following methods:

Static creation using XAML syntax or programmatically through the code behind file
Dynamic creation using a constructor to create new instances of the C1TreeViewItem class.
Data source creation through binding C1TreeView to a SiteMapDataSource, XMLDataSource, or an AccessDataSource.

Static Creation
Dynamic Creation
Data Source Creation

Each node in the Tree is represented by a name/value pair, defined by the text and value properties of treenode, respectively. The text of a node is rendered, whereas the value of a node is not rendered and is typically used as additional data for handling postback events.

A static menu is the simplest way to create the treeview structure.

To display static C1TreeViewItems using XAML syntax, first nest opening and closing <c1:C1TreeViewItem > tags between opening and closing tags of the C1TreeView control. Next, create the treeview structure by nesting <c1:C1TreeViewItem> elements between opening and closing <c1:C1TreeViewItem> tags. Each <c1:C1TreeViewItem> element represents a node in the control and maps to a C1TreeViewItem object.

Declarative syntax can be used to define the C1TreeViewItems inline on your page.

For example:

XAML	Copy Code
<Grid x:Name="LayoutRoot"> <c1:C1TreeView x:Name="Tree"> <c1:C1TreeViewItem Header="Book List" IsExpanded="True" IsSelected="True"> <c1:C1TreeViewItem Header="Language Books"/> <c1:C1TreeViewItem Header="Security Books"/> <c1:C1TreeViewItem Header="Classic Books"> <c1:C1TreeViewItem Header="Catch-22"/> <c1:C1TreeViewItem Header="The Great Gatsby"/> </c1:C1TreeViewItem> </c1:C1TreeViewItem> </c1:C1TreeView> </Grid>

XAML

Copy Code

<Grid x:Name="LayoutRoot"> 
   <c1:C1TreeView x:Name="Tree"> 
       <c1:C1TreeViewItem Header="Book List" IsExpanded="True" IsSelected="True">
           <c1:C1TreeViewItem Header="Language Books"/>
           <c1:C1TreeViewItem Header="Security Books"/>
           <c1:C1TreeViewItem Header="Classic Books">
               <c1:C1TreeViewItem Header="Catch-22"/>
               <c1:C1TreeViewItem Header="The Great Gatsby"/>
           </c1:C1TreeViewItem>
       </c1:C1TreeViewItem>
   </c1:C1TreeView>
</Grid>

Dynamic tree views can be created on the server side or client side. When creating dynamic tree view on the server side, use a constructor to dynamically create a new instance of the C1TreeView class. For example:

Visual Basic	Copy Code
Public Sub New() InitializeComponent() InitializeTreeView() End Sub Private Sub InitializeTreeView() ' Remove items that were added at design time Tree.Items.Clear() Dim booklist As New C1TreeViewItem() booklist.Header = "Book List" Tree.Items.Add(booklist) ' Adding child items Dim language As New C1TreeViewItem() language.Header = "Language Books" booklist.Items.Add(language) ' Adding child items Dim security As New C1TreeViewItem() security.Header = "Security Books" booklist.Items.Add(security) ' Adding child items Dim classic As New C1TreeViewItem() classic.Header = "Classic Books" booklist.Items.Add(classic) 'Add checkbox classic.Header = New CheckBox() ' Adding child items Dim subclassic As New C1TreeViewItem() subclassic.Header = "Catch-22" classic.Items.Add(subclassic) Dim subclassic2 As New C1TreeViewItem() subclassic2.Header = "The Great Gatsby" classic.Items.Add(subclassic2) End Sub

Visual Basic

Copy Code

Public Sub New()
    InitializeComponent() 
    InitializeTreeView()
End Sub
Private Sub InitializeTreeView()
   ' Remove items that were added at design time
    Tree.Items.Clear()       
    Dim booklist As New C1TreeViewItem()
    booklist.Header = "Book List"
    Tree.Items.Add(booklist)
    ' Adding child items
    Dim language As New C1TreeViewItem()
    language.Header = "Language Books"
    booklist.Items.Add(language)         
    ' Adding child items
    Dim security As New C1TreeViewItem()
    security.Header = "Security Books"
    booklist.Items.Add(security)          
    ' Adding child items
    Dim classic As New C1TreeViewItem()
    classic.Header = "Classic Books"
    booklist.Items.Add(classic)
    'Add checkbox
    classic.Header = New CheckBox()         
    ' Adding child items
    Dim subclassic As New C1TreeViewItem()
    subclassic.Header = "Catch-22"
    classic.Items.Add(subclassic)
    Dim subclassic2 As New C1TreeViewItem()
    subclassic2.Header = "The Great Gatsby"
    classic.Items.Add(subclassic2)
End Sub

C#	Copy Code
public MainPage() { InitializeComponent(); InitializeTreeView(); } void InitializeTreeView() { // Remove items that were added at design time Tree.Items.Clear(); C1TreeViewItem booklist = new C1TreeViewItem(); booklist.Header = "Book List"; Tree.Items.Add(booklist); // Adding child items C1TreeViewItem language = new C1TreeViewItem(); language.Header = "Language Books"; booklist.Items.Add( language ); // Adding child items C1TreeViewItem security = new C1TreeViewItem(); security.Header = "Security Books"; booklist.Items.Add(security); // Adding child items C1TreeViewItem classic = new C1TreeViewItem(); classic.Header = "Classic Books"; booklist.Items.Add(classic); //Add checkbox classic.Header = new CheckBox(); // Adding child items C1TreeViewItem subclassic = new C1TreeViewItem(); subclassic.Header = "Catch-22"; classic.Items.Add(subclassic); C1TreeViewItem subclassic2 = new C1TreeViewItem(); subclassic2.Header = "The Great Gatsby"; classic.Items.Add(subclassic2); }

Copy Code

public MainPage()
  {
      InitializeComponent();
      InitializeTreeView();       
  }
 void InitializeTreeView()
 {
   // Remove items that were added at design time
   Tree.Items.Clear();         
   C1TreeViewItem booklist = new C1TreeViewItem();
   booklist.Header = "Book List";
   Tree.Items.Add(booklist);
   // Adding child items
   C1TreeViewItem language = new C1TreeViewItem();
   language.Header = "Language Books";
   booklist.Items.Add( language );
   // Adding child items
   C1TreeViewItem security = new C1TreeViewItem();
   security.Header = "Security Books";
   booklist.Items.Add(security);
  // Adding child items
  C1TreeViewItem classic = new C1TreeViewItem();
  classic.Header = "Classic Books";
  booklist.Items.Add(classic);
  //Add checkbox
  classic.Header = new CheckBox();
  // Adding child items
  C1TreeViewItem subclassic = new C1TreeViewItem();
  subclassic.Header = "Catch-22";
  classic.Items.Add(subclassic);
  C1TreeViewItem subclassic2 = new C1TreeViewItem();
  subclassic2.Header = "The Great Gatsby";
  classic.Items.Add(subclassic2);     
 }

TreeView items can be created from a hierarchal datasource control such as an XMLDataSource or SiteMapDataSource. This allows you to update the treeview items without having to edit code.

When using multi-level data as ItemsSource for the C1TreeView, you need to specify a C1HierarchicalDataTemplate for the items.

The template will tell the C1TreeView where to find the next level of data, this is done through the "ItemsSource" property of the C1HierarchicalDataTemplate.

Adding Images

You can add images to a node by grabbing its first child (the header), casting that to a StackPanel, and inserting an image element at whatever position you prefer. For example:

Code	Copy Code
StackPanel nodeHeader = TreeNode.Children[0] as StackPanel; nodeHeader.Children.Insert(0, myImage);